<template>
  <div class="home">
    <!-- 
      <el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。
      <el-header>：顶栏容器。
      <el-aside>：侧边栏容器。
      <el-main>：主要区域容器。
      <el-footer>：底栏容器。
    -->
    <el-container>
      <el-aside :width="isCollapse ? '65px' : '200px'">
        <router-link to="/" class="logo">
          <img src="../assets/logo.png" />
        </router-link>
        <!-- 
          组件解读：
            <el-menu>           整个菜单
            <el-submenu>        一级导航菜单编组(带展开功能)
              <template slot="title">  标题插槽
            <el-menu-item>     一级菜单子项/二级菜单子项(没有展开功能)
          属性解读：
            index 属性         🔔注意：设置成不重复的字符串，路由模式可以实现路由跳转
            default-active     默认选中项，配合 index 属性实现默认选中效果
            unique-opened      是否只保持一个子菜单的展开
            router             是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
        -->
        <el-menu
          :collapse="isCollapse"
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          background-color="#000"
          text-color="#fff"
          active-text-color="#ffd04b"
          unique-opened
          router
        >
          <el-menu-item index="/">
            <i class="el-icon-s-home"></i>
            <span>首页</span>
          </el-menu-item>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>文章管理</span>
            </template>
            <el-menu-item index="/home/post_list">文章列表</el-menu-item>
            <el-menu-item index="/home/post_publish">发布文章</el-menu-item>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-circle-plus"></i>
              <span>栏目管理</span>
            </template>
            <el-menu-item index="2-1">栏目列表</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <!-- 头部 -->
        <el-header height="80px">
          <div class="header-left">
            <i
              @click="isCollapse = !isCollapse"
              :class="isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold'"
            />
            <h1 class="title">黑马头条后台管理系统</h1>
          </div>
          <div class="header-right">
            <img :size="50" class="avatar" :src="userinfo.head_img | imgUrl" />
            <el-dropdown>
              <span class="el-dropdown-link">
                <span class="nickname">欢迎你：{{ userinfo.nickname }}</span>
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-s-home">
                  <router-link to="/">首页</router-link>
                </el-dropdown-item>
                <el-dropdown-item icon="el-icon-switch-button">
                  <span @click="logout">退出</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <!-- 主要区域容器 -->
        <el-main>
          <!-- 路由挂载点 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import { userDetailByIdAPI } from "../apis/user";
  import { getUserId, removeToken, removeUserId } from "../utils/localData";
  export default {
    data() {
      return {
        userinfo: {},
        isCollapse: false
      };
    },
    async created() {
      // 获取用户 id，发送请求的时候需要用到
      const id = getUserId();
      // console.log(id);
      // 获取用户信息
      const res = await userDetailByIdAPI(id);
      // console.log(res);
      // 把用户信息绑定到页面中
      this.userinfo = res.data.data;
    },
    methods: {
      logout() {
        removeToken();
        removeUserId();
        this.$router.replace("/login");
      }
    }
  };
</script>

<style lang="less" scoped>
.el-container {
  height: 100vh;
}
.el-header {
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .header-left {
    display: flex;
    font-size: 24px;
    i {
      cursor: pointer;
    }
    .title {
      margin-left: 20px;
    }
  }
  .header-right {
    display: flex;
    align-items: center;
    .avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    .nickname {
      margin: 0 10px;
      color: #fff;
    }
    .el-icon-arrow-down {
      color: #fff;
    }
  }
}
.el-menu {
  border-right: none;
}
.el-aside {
  background-color: #000;
  color: #fff;
  transition: all 0.2s;
  .logo {
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    img {
      width: 100%;
    }
  }
}
.el-main {
  background-color: #e9eef3;
  color: #333;
}
</style>